<template>
	<div class="panel bar2">
		<h2>订单量统计</h2>
		<div class="chart"></div>
		<div class="panel-footer"></div>
	</div>
</template>

<script>
export default{
	mounted(){
		this.home4()
	},
	methods:{
		home4(){
			var myChart4=this.$echarts.init(document.querySelector('.bar2 .chart'));
			const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
			var option4 = {
				
				legend: {
					icon: 'circle',
					top: '5%',
					right: '5%',
					itemWidth: 6,
					itemGap: 20,
					textStyle: {
						color: '#fff',
						fontSize: 12
					},
					// data: data.legendData,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						label: {
							show: true,
							backgroundColor: '#fff',
							color: '#556677',
							borderColor: 'rgba(0,0,0,0)',
							shadowColor: 'rgba(0,0,0,0)',
							shadowOffsetY: 0
						},
						lineStyle: {
							width: 0
						}
					},
					backgroundColor: '#fff',
					textStyle: {
						color: '#5c6c7c'
					},
					padding: [10, 10],
					extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
				},
				grid: {
					top: '20%'
				},
				xAxis: [{
					type: 'category',
					name: '月份',
					right:'2',
					nameTextStyle: {
						color: '#fff',
						fontSize: 12,
						align: "center"
					},
					data: ['01', '02','03', '04', '05', '06', '07', '08', '09', '10'],
					axisLine: {
						lineStyle: {
							color: '#fff'
						}
					},
					// axisTick: {
					//     show: false
					// },
					axisLabel: {
						interval: 0,
						textStyle: {
							color: '#fff'
						},
						// 默认x轴字体大小
						fontSize: 12,
						// margin:文字到x轴的距离
						margin: 15
					},
				}],
				yAxis: [{
					type: 'value',
					name: '数量',
					nameTextStyle: {
						color: '#fff',
						fontSize: 12,
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#fff'
						}
					},
					axisLabel: {
						textStyle: {
							color: '#fff'
						}
					},
					splitLine: {
						show: false
					}
				}],
				series: [{
						name: '订单',
						type: 'line',
						data: [102, 120, 212, 112, 135, 223, 147, 129, 211,212, 316],
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 2,
							color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#9effff'
								},
								{
									offset: 1,
									color: '#9E87FF'
								}
							]),
						},
						itemStyle: {
							normal: {
								color: colorList[0],
								borderColor: colorList[0]
							}
						}
					}, {
						name: '退单',
						type: 'line',
						data: [5, 12, 11, 14, 25, 16, 10,12, 15, 18, 21],
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 2,
							color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [{
									offset: 0,
									color: '#73DD39'
								},
								{
									offset: 1,
									color: '#73DDFF'
								}
							]),
						},
						itemStyle: {
							normal: {
								color: colorList[1],
								borderColor: colorList[1]
							}
						}
					},
					{
						name: '合计',
						type: 'line',
						data: [152, 122, 172, 142, 324, 162, 121, 132, 144, 215, 320],
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						showSymbol: false,
						lineStyle: {
							width: 2,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: '#fe9a'
								},
								{
									offset: 1,
									color: '#fe9a8b'
								}
							]),
						},
						itemStyle: {
							normal: {
								color: colorList[2],
								borderColor: colorList[2]
							}
						}
					}
				]
			}
			myChart4.setOption(option4)
			window.addEventListener('resize',function(){
				myChart4.resize()
			})
		}
	}
}
</script>

<style>
</style>
